<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>通知</span>

      </div>
      <!-- 搜索表单 -->
      <el-form :model="searchForm" label-width="80px" style="margin-top: 20px;">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="已读/未读">
              <el-select
                  v-model="searchForm.showredio"
                  placeholder="请选择已读/未读"
              >
                <el-option label="未读" value="0" />
                <el-option label="已读" value="1" />
                <el-option label="管理员" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="ListArray">搜索</el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="clearsearch">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </template>

    <div>
      <el-row>
        <!-- 表格内容 -->
        <el-table :data="ListData" style="width: 100% ;margin-top: 30px;" v-loading="loading">
          <el-table-column label="序号" width="70" type="index" />
          <el-table-column label="发件人" prop="adminName" />
          <el-table-column label="收件人" prop="userName" />
          <el-table-column label="通知内容" prop="content" />
          <el-table-column label="已读/未读">
            <template #default="{ row }">
              <el-tag
                  :type="{
              0: 'info',
              1:'success',
              3:'warning'
            }[row.showredio]"
              >
                {{
                  {
                    "0": '未读',
                    "1": '已读',
                    "3": '管理员',
                  }[row.showredio]
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="240">
            <template #default="{ row }">
              <el-button
                  type="success"
                  :icon="Check"
                  circle
                  plain
                  @click="isRead(row)"
              ></el-button>
              <el-button
                  type="danger"
                  :icon="Close"
                  circle
                  plain
                  @click="handleCancel(row)"
              ></el-button>
            </template>
          </el-table-column>
          <template #empty>
            <el-empty description="暂无通知数据" />
          </template>
        </el-table>

      </el-row>

    </div>
  </el-card>

</template>
<script setup>
import {Close,Check} from "@element-plus/icons-vue";
import {ref} from "vue";
import {useUserInfoStore} from "@/stores/userinfo.js";
import {deleteNotice, getNoticeList, updateNotice} from "@/api/notice.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {deleteContractService} from "@/api/contract.js";
import {getHousewearList} from "@/api/housewear.js";
import {getCommunityList} from "@/api/community.js";
const userInfoStore = useUserInfoStore()
const userinfoId = userInfoStore.info.id;
const userrole = userInfoStore.info.roleId;
const loading = ref(false);
const ListData = ref([])
const searchForm = ref({userId:userinfoId,id:userrole,showredio:''})
const ListArray = async () => {
  loading.value = true
  console.log("searchForm.value.showredio="+searchForm.value.showredio)
  const params = {
    ...searchForm.value,
  };
  try {
    const result = await getNoticeList(
        params
    )
    ListData.value = result.res
  } finally {
    loading.value = false
  }
}
const clearsearch=()=>{
  searchForm.value={userId:userinfoId,id:userrole,showredio:''}
  ListArray()
}

const isRead = async (row) => {
  try {
    const reshouse = await updateNotice({
      id:row.id
    })
    ElMessage.success('标记为已读')
    ListArray()
  } catch (error) {
    ElMessage.error('取消标记')
  }
}

const handleCancel = (row) => {
  ElMessageBox.confirm('此操作删除通知, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await deleteNotice(row.id)
    ElMessage.success('删除成功')
    ListArray()
  }).catch(() => {
    ElMessage.info('取消删除')
  })
}







ListArray()

</script>
